<template>
  <div class="container">
    <div class="search-box">
      <el-input
        placeholder="请输入内容"
        class="input-box"
        v-model="keyword"
      ></el-input>
      <el-button @click="clearSearch">清除</el-button>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="任务编号" width="80">
      </el-table-column>
      <el-table-column prop="name" label="任务名称"> </el-table-column>
      <el-table-column prop="des" label="任务描述"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="{ row }">
          <el-popconfirm
            confirmButtonText="好的"
            cancelButtonText="不用了"
            icon="el-icon-info"
            iconColor="red"
            title="确定删除任务吗？"
            @confirm="del(row.id)"
          >
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    // 获取初始列表
    const tableData = ref([])
    function loadList() {
      axios.get('http://localhost:3001/data').then(res => {
        tableData.value = res.data
      })
    }
    onMounted(() => {
      loadList()
    })

    // 删除功能
    function del(id) {
      axios.delete(`http://localhost:3001/data/${id}`).then(res => {
        loadList()
      })
    }

    // 搜索功能
    const keyword = ref('')
    function search() {
      axios.get(`http://localhost:3001/data/?name=${keyword.value}`).then(res => {
        tableData.value = res.data
      })
    }

    // 清除功能
    function clearSearch() {
      keyword.value = ''
      loadList()
    }
    return {
      tableData,
      del,
      keyword,
      search,
      clearSearch
    }
  }
}
</script>


<style scoped lang="less">
.container {
  width: 600px;
  margin: 0 auto;
}
.search-box {
  display: flex;
  margin-bottom: 10px;
  .input-box {
    margin-right: 20px;
  }
}
</style>


